<template>
  <div class="sign-box">
    <h3 class="sign-title">
      <a href="#">登陆 </a>
      <b>.</b>
      <a href="#">注册</a>
    </h3>
    <!--登陆-->
    <form action="#" class="sign-form" style="display: none;">
      <div class="sign-input">
        <input type="text" name="user_name" placeholder="手机或邮箱" v-model="sessions.user_name">
        <i class="iconfont ic-user"></i>
      </div>
      <div class="sign-input">
       <input type="password" name="user_password" placeholder="密码" v-model="sessions.user_password">
      </div>
      <div class="sign-remember-box">
        <input type="checkbox" name="remember_user" id="checkbox">
        <label for="checkbox">记住我</label>
      </div>
      <div class="sign-forget">
        <a href="" class="sign-problem">登陆遇到问题</a>
      </div>
        <button type="button" class="sign-btn">登陆</button>
    </form>
    <!--注册-->
    <form action="#" class="signup-form">
      <div class="sign-input">
        <input type="text" name="user_name" placeholder="手机或邮箱" v-model="sessions.user_name">
        <i class="iconfont ic-user"></i>
      </div>
      <div class="sign-input">
        <input type="password" name="user_password" placeholder="密码" v-model="sessions.user_password">
      </div>
      <div class="sign-remember-box">
        <input type="checkbox" name="remember_user" id="checkbox">
        <label for="checkbox">记住我</label>
      </div>
      <div class="sign-forget">
        <a href="" class="sign-problem">登陆遇到问题</a>
      </div>
      <button type="button" class="sign-btn">登陆</button>
    </form>
    <h4>- 社交账号登陆 -</h4>
  </div>
</template>

<script>
var session = {
  user_name: '1245300723@qq.com',
  user_password: '12y4831'
};
export default {
  name: 'HelloWorld',
  data () {
    return {
      sessions: session
    }
  },
  computed: {
    remember: function () {
        session.user_name = this.sessions.user_name;
        session.user_password = this.sessions.user_password;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
  text-decoration: none;
}
div {
  display: block;
}
*, :after, :before {
  box-sizing: border-box;
}
.sign-box{
  width: 400px;
  margin: 50px auto 0;
  padding: 50px 50px 30px;
  background-color: #fff;
  border-radius: 4px;
  display:inline-block;
  box-shadow:0 0 8px rgba(0,0,0,.1);
  }
  .sign-title{
    margin:0 auto 50px;
    padding: 10px;
    color: #969696;
  }
  .sign-input{
    padding: 50px auto 50px;
  }
  .sign-input input {
    width: 100%;
    height: 40px;
    margin-bottom: 0px;
    border: 1px solid #c8c8c8;
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;
    background-color: hsla(0,0%,71%,.1);
    vertical-align: middle;
  }
  .sign-form .sign-remember-box{
    float: left;
    margin: 14px 0 0;
  }
  .sign-form input[type=checkbox]{
    margin: 0 0 0;
    line-height: normal;
    padding: 0;
  }
  .sign-form .sign-forget {
    float: right;
    margin: 14px 0 0;
  }

  .sign-btn {
    width: 100%;
    margin-top: 40px;
    padding: 9px 18px;
    background-color: #3194d0;
    font-size: 18px;
    cursor: pointer;
    display: block;
    border: none;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
  }

</style>
